{% extends "base_generic.html" %}
{% block content %}
    <h1>SunYiyang's Library</h1>
    <div class="card">
        <p>书籍总数：{{ num_books }}</p>
        <p>作者总数：{{ num_authors }}</p>
        <p>借阅总数：{{ num_borrowed }}</p>
        <p>点赞总数：{{ num_likes }}</p>
    </div>
    <div id="ai-chat-area" style="margin-top:40px;">
        <div id="chat-history" style="min-height:200px; background:#f8f8f8; border-radius:8px; padding:16px; max-width:600px; margin:auto;">
            <!-- 聊天记录动态插入 -->
        </div>
        <div style="display:flex; margin-top:10px; max-width:600px; margin:auto;">
            <input id="user-input" type="text" class="form-control" placeholder="和AI对话，或输入书名获取概要..." style="flex:1;">
            <button id="send-btn" class="btn btn-primary" style="margin-left:8px;">发送</button>
        </div>
    </div>
    <script>
        const chatHistory = document.getElementById('chat-history');
        document.getElementById('send-btn').onclick = function() {
            const input = document.getElementById('user-input');
            const msg = input.value.trim();
            if (!msg) return;
            chatHistory.innerHTML += `<div style="text-align:left;"><b>你：</b>${msg}</div>`;
            input.value = '';
            fetch('/api/ai_chat/', {
                method: 'POST',
                headers: {'X-CSRFToken': '{{ csrf_token }}'},
                body: new URLSearchParams({message: msg})
            })
            .then(r=>r.json())
            .then(data=>{
                chatHistory.innerHTML += `<div style="text-align:right;"><b>AI：</b>${data.reply}</div>`;
                chatHistory.scrollTop = chatHistory.scrollHeight;
            });
        }
    </script>
{% endblock %}
